<!--  -->
<template>
  <div>周课表

  
    <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="time" label="time" width="150" />

    <el-table-column fixed v-for="week in weeks"  :label="week" width="150">
     <template #default="scope">

        <div v-for="item in scope.row[week]">
             {{ item.courseName }}
        </div>
     </template>
    </el-table-column>

    
  </el-table>

  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'
import { getWeekData } from './weekData';
import { dayjs } from 'element-plus';
import 'dayjs/locale/zh-cn'
const weeks= ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];

const tableData=ref<any>([]);
const getData=()=>{

    //
    const data:any[]=getWeekData();

    let times=[...new Set(data.map((item:any)=>dayjs(item.startTime).format("HH:mm")))].sort();

    console.log(222,times);

     tableData.value= times.map(item=>{
        let _item:any={
           time:item
        }

        weeks.forEach(week=>{
            _item[week]= data.filter((d:any)=>dayjs(d.courseDate).locale('zh-cn').format('dddd')==week && item==dayjs(d.startTime).format("HH:mm")) ;
        })

         return _item

    });

    console.log("tableData",tableData.value);
    


}
getData();


console.log(dayjs("2025-06-29").locale('zh-cn').format('dddd'));

</script>
<style scoped>
</style>